import { Header } from '@/components/Header';
import { Highlight } from '@/components/Highlight';
import { getSnippetById } from '@/services/api';
import Link from 'next/link';

interface SnippetPageProps {
  params: {
    id: string;
  };
}

export default async function SnippetPage({ params: _params }: SnippetPageProps) {
  const params = await _params;
  console.log('params.id:', params.id);
  const snippet = await getSnippetById(Number(params.id));
  console.log('snippet:', snippet);

  if (!snippet) {
    return (
      <div className="flex flex-col min-h-screen bg-gray-50 dark:bg-gray-900">
        <Header />
        <main className="flex-1 container mx-auto py-8 px-4 md:px-6">
          <div className="bg-white dark:bg-gray-950 rounded-xl shadow-lg p-8">
            <h1 className="text-3xl font-bold mb-4 text-gray-900 dark:text-gray-50">Snippet not found</h1>
          </div>
        </main>
      </div>
    );
  }

  return (
    <div className="flex flex-col min-h-screen bg-gray-50 dark:bg-gray-900">
      <Header />
      <main className="flex-1 container mx-auto py-8 px-4 md:px-6">
        <div className="bg-white dark:bg-gray-950 rounded-xl shadow-lg p-8">
          <h1 className="text-3xl font-bold mb-4 text-gray-900 dark:text-gray-50">{snippet.title}</h1>
          <div className="flex flex-wrap gap-2 mb-6">
            {(snippet.tags || []).map(tag => (
              <Link key={tag.id} href={`/?tag=${tag.name}`} prefetch={false}>
                <span className="bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-300 px-3 py-1 rounded-full text-sm font-medium">{tag.name}</span>
              </Link>
            ))}
          </div>
          <Highlight content={snippet.content} />
        </div>
      </main>
    </div>
  );
}